<template>
  <div class="item" @click="goDetail(item)">
    <img class="img" :src="item?.thumbnail?.url" alt="" />
    <div class="title mt-[8px]">{{ item?.title }}</div>
    <div class="caption">{{ item?.caption }}</div>
    <div class="mt-[4px] flex_row_sp">
      <div class="flex_row">
        <img class="avatar" :src="item?.user?.avatar" :alt="item.user?.name" />
        <div class="name ml-[4px]">
          {{ item.user?.name }}
        </div>
      </div>
      <div class="flex_row">
        <svg
          class="mr-[2px]"
          @click.stop="sendLike(item)"
          v-like-pulse
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none">
          <path
            d="M10.0005 17.5C9.7496 17.4997 9.5046 17.4239 9.29737 17.2824C6.22745 15.1984 4.89815 13.7695 4.16495 12.8762C2.60245 10.9719 1.8544 9.0168 1.87549 6.89961C1.9001 4.47344 3.84659 2.5 6.21456 2.5C7.93643 2.5 9.12901 3.46992 9.82354 4.27773C9.84554 4.30307 9.87273 4.32338 9.90325 4.3373C9.93378 4.35122 9.96694 4.35842 10.0005 4.35842C10.034 4.35842 10.0672 4.35122 10.0977 4.3373C10.1283 4.32338 10.1554 4.30307 10.1774 4.27773C10.872 3.46914 12.0646 2.5 13.7864 2.5C16.1544 2.5 18.1009 4.47344 18.1255 6.9C18.1466 9.01758 17.3978 10.9727 15.836 12.8766C15.1028 13.7699 13.7735 15.1988 10.7036 17.2828C10.4963 17.4241 10.2514 17.4998 10.0005 17.5Z"
            :fill="item.like_flag === 1 ? '#FF4D4F' : '#CBCBCB'" />
        </svg>
        <span class="like_num">{{ formatNumber(item?.counter?.like_count || 0) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { formatNum } from '@/utils/tools';
  import { FeedItem } from '@/api/feeds';
  import { bus } from '@/utils/bus';
  import { CommentAPI, commentParams } from '@/api/comment';
  import { computed } from 'vue';
  import { useUserStore } from '@/store/user';
  import { useRouter } from 'vue-router';
  import { useLoginModal } from '@/composables/useLoginModal';
  const router = useRouter();
  const userStore = useUserStore();
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  const props = defineProps({
    item: { type: Object, default: () => {} },
  });

  const goDetail = (item: any) => {
    window.location.href = 'https://community.nexbie.com/';
    // router.push({ path: '/detail', query: { feed_id: item?.feed_id } });
  };

  // 点赞、取消点赞
  const sendLike = async (item: any) => {
    try {
      if (!isLoggedIn.value) {
        const { showModal } = useLoginModal();
        showModal();
        return;
      }
      const { feed_id, like_flag, uid } = item || {};
      const isLikeState = like_flag === 1;
      item.like_flag = isLikeState ? 0 : 1;
      const like_count = item?.counter?.like_count || 0;
      item.counter.like_count = isLikeState ? like_count - 1 : like_count + 1;
      const params: any = {
        feed_id,
        liked_uid: uid,
      };
      !isLikeState ? await CommentAPI.isLike(params) : await CommentAPI.unLike(params);
    } catch (e) {
      console.log('e', e);
    }
  };

  const formatNumber = (num: number) => {
    return formatNum(num);
  };
</script>

<style scoped lang="scss">
  .item {
    width: 100%;
    overflow: hidden;
    margin-bottom: 16px;
    .like_num {
      color: var(---9, #222);
      font-family: 'InterTight';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .avatar {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border-radius: 20px;
    }
    .name {
      color: var(---9, #222);
      font-family: 'InterTight';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      max-width: 80px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .flex_row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .flex_row_sp {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .img {
      width: 100%; /* 宽度占满容器 */
      height: auto; /* 高度自动计算（关键，保持宽高比） */
      object-fit: contain; /* 可选：确保图片完整显示（无裁剪） */
      display: block; /* 可选：去除图片底部默认空白间隙 */
      border-radius: 8px;
    }

    .title {
      width: 100%;
      max-width: 180px;
      color: var(---9, #222);
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'InterTight';
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .caption {
      width: 100%;
      max-width: 180px;
      color: var(---6, #7a7a7a);
      font-family: 'InterTight';
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
</style>
